<!DOCTYPE html>
<html >
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="x-ua-compatible" content="ie=edge">

    <title>Material Design Bootstrap</title>

    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css">

    <!-- Bootstrap core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- Material Design Bootstrap -->
    <link href="css/mdb.min.css" rel="stylesheet">

    <!-- Your custom styles (optional) -->
    <link href="css/style.css" rel="stylesheet">
</head>

<body class="fixed-sn blue-skin">

    <!-- Modal Contact 模态框-->
        <div class="modal fade modal-ext" id="modal-contact" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <!--Content-->
        <div class="modal-content">
            <!--Header-->
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="myModalLabel">Write to us</h4>
            </div>
            <!--Body-->
            <div class="modal-body">
                <p>We like to receive a messages.</p>
                <br>
                <div class="md-form">
                    <i class="fa fa-user prefix"></i>
                    <input type="text" id="form22" class="form-control">
                    <label for="form42">Your name</label>
                </div>

                <div class="md-form">
                    <i class="fa fa-envelope prefix"></i>
                    <input type="text" id="form32" class="form-control">
                    <label for="form34">Your email</label>
                </div>

                <div class="md-form">
                    <i class="fa fa-tag prefix"></i>
                    <input type="text" id="form32" class="form-control">
                    <label for="form34">Subject</label>
                </div>

                <div class="md-form">
                    <i class="fa fa-pencil prefix"></i>
                    <textarea type="text" id="form8" class="md-textarea"></textarea>
                    <label for="form8">Icon Prefix</label>
                </div>

                <div class="text-center">
                    <button class="btn btn-primary">Submit</button>

                    <div class="call">
                        <p>Or would you prefer to call? <span class="cf-phone"><i class="fa fa-phone"> +01 234 565 280</i></span></p>
                    </div>
                </div>
            </div>
            <!--Footer-->
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
        <!--/.Content-->
    </div>
    </div>
    <!-- ./ Modal Contact 模态框-->

    <!-- Modal Cart Modal -->
        <div class="modal fade cart-modal" id="cart-modal-ex" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <!--Content-->
        <div class="modal-content">
            <!--Header-->
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="myModalLabel">Your cart</h4>
            </div>
            <!--Body-->
            <div class="modal-body">

                <table class="table table-bordered table-hover">
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>Product name</th>
                            <th>Price</th>
                            <th>Remove</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <th scope="row">1</th>
                            <td>Product 1</td>
                            <td>100$</td>
                            <td><a><i class="fa fa-remove"></i></a></td>
                        </tr>
                        <tr>
                            <th scope="row">2</th>
                            <td>Product 2</td>
                            <td>100$</td>
                            <td><a><i class="fa fa-remove"></i></a></td>
                        </tr>
                        <tr>
                            <th scope="row">3</th>
                            <td>Product 3</td>
                            <td>100$</td>
                            <td><a><i class="fa fa-remove"></i></a></td>
                        </tr>
                        <tr>
                            <th scope="row">4</th>
                            <td>Product 4</td>
                            <td>100$</td>
                            <td><a><i class="fa fa-remove"></i></a></td>
                        </tr>
                        <tr class="total">
                            <th scope="row">5</th>
                            <td>Total</td>
                            <td>400$</td>
                        </tr>
                    </tbody>
                </table>

                <button class="btn btn-primary">Checkout</button>

            </div>
            <!--Footer-->
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
        <!--/.Content-->
    </div>
    </div>
    <!-- /.Modal Cart Modal-->

    <!--Modal: Login Form 登录模态框 -->
        <div class="modal fade" id="modalLogin" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog cascading-modal" role="document">
    <!--Content-->
    <div class="modal-content">

        <!--Header-->
        <div class="modal-header light-blue darken-3 white-text">
            <h4 class="title"><i class="fa fa-user"></i> Log in</h4>
            <button type="button" class="close waves-effect waves-light" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
        <!--Body-->
        <div class="modal-body">
            <div class="md-form form-sm">
                <i class="fa fa-envelope prefix"></i>
                <input type="text" id="form30" class="form-control">
                <label for="form30">Your email</label>
            </div>

            <div class="md-form form-sm">
                <i class="fa fa-lock prefix"></i>
                <input type="password" id="form31" class="form-control">
                <label for="form31">Your password</label>
            </div>

            <div class="text-center mt-2">
                <button class="btn btn-info">Log in <i class="fa fa-sign-in ml-1"></i></button>
            </div>

        </div>
        <!--Footer-->
        <div class="modal-footer">
            <div class="options text-center text-md-right mt-1">
                <p>Not a member? <a href="#">Sign Up</a></p>
                <p>Forgot <a href="#">Password?</a></p>
            </div>
            <button type="button" class="btn btn-outline-info waves-effect ml-auto" data-dismiss="modal">Close</button>
        </div>
    </div>
    <!--/.Content-->
    </div>
    </div>
    <!--Modal: Login Form 登录模态框 -->

    <!-- Modal quick-look-ex -->
        <div class="modal fade ql-modal" id="quick-look-ex" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
    <!--Content-->
    <div class="modal-content">
        <!--Header-->
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
            <h4 class="modal-title" id="myModalLabel">Quick look</h4>
        </div>
        <!--Body-->
        <div class="modal-body">
            <!--Grid-->
            <div class="container-fluid">
                <div class="row">

                    <!--First column-->
                    <div class="col-md-3">
                        <h4>Gallery</h4>
                        <hr>
                        <!--Carousel Wrapper-->
                        <div id="carousel-example-1" class="carousel slide carousel-fade" data-ride="carousel">

                            <!--Slides-->
                            <div class="carousel-inner" role="listbox">
                                <div class="carousel-item active">
                                    <img src="https://mdbootstrap.com/images/ecommerce/vertical/img%20(13).jpg" alt="First slide">
                                </div>
                                <div class="carousel-item">
                                    <img src="https://mdbootstrap.com/images/ecommerce/vertical/img%20(15).jpg" alt="Second slide">
                                </div>
                                <div class="carousel-item">
                                    <img src="https://mdbootstrap.com/images/ecommerce/vertical/img%20(16).jpg" alt="Third slide">
                                </div>
                            </div>
                            <!--/.Slides-->

                            <!--Controls-->
                            <a class="left carousel-control" href="#carousel-example-1" role="button" data-slide="prev">
                                <span class="icon-prev" aria-hidden="true"></span>
                                <span class="sr-only">Previous</span>
                            </a>
                            <a class="right carousel-control" href="#carousel-example-1" role="button" data-slide="next">
                                <span class="icon-next" aria-hidden="true"></span>
                                <span class="sr-only">Next</span>
                            </a>
                            <!--/.Controls-->
                        </div>
                        <!--/.Carousel Wrapper-->
                    </div>
                    <!--/.First column-->

                    <!--Second column-->
                    <div class="col-md-4">
                        <!--Title-->
                        <a><h4>Product title</h4></a>
                        <hr>
                        <!--Price-->
                        <div class="price">
                            <p><span class="price-after">$500</span> <span class="price-before">$700</span></p>
                            <span class="label">-20%</span>
                        </div>
                        <!--Size-->
                        <select class="mdb-select">
                            <option value="" disabled selected>Choose your size</option>
                            <option value="1">20-30</option>
                            <option value="2">31-40</option>
                            <option value="3">41-50</option>
                        </select>
                        <!--Call to action-->
                        <button class="btn btn-default">Buy now</button>
                        <a class="btn-floating wishlist" data-toggle="tooltip" data-placement="bottom" title="Add to wishlist"><i class="fa fa-heart"></i></a>

                        <hr>

                        <h4>Short description</h4>
                        <hr>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit est, ex nulla voluptates eaque aperiam repudiandae consectetur quae quod.</p>
                        <br>
                        <!--Social buttons-->
                        <p class="text-center">Share with your friends!</p>
                        <ul class="inline-ul">
                            <li><a class="btn-floating btn-small btn-fb"><i class="fa fa-facebook"> </i></a></li>
                            <li><a class="btn-floating btn-small btn-tw"><i class="fa fa-twitter"> </i></a></li>
                            <li><a class="btn-floating btn-small btn-gplus"><i class="fa fa-google-plus"> </i></a></li>
                            <li><a class="btn-floating btn-small btn-li"><i class="fa fa-linkedin"> </i></a></li>
                            <li><a class="btn-floating btn-small btn-git"><i class="fa fa-github"> </i></a></li>
                            <li><a class="btn-floating btn-small btn-pin"><i class="fa fa-pinterest"> </i></a></li>
                            <li><a class="btn-floating btn-small btn-ins"><i class="fa fa-instagram"> </i></a></li>
                        </ul>


                    </div>
                    <!--/.Second column-->

                    <!--Third column-->
                    <div class="col-md-5">
                        <h4>Reviews</h4>
                        <hr>

                        <!--First review-->
                        <div class="media">
                            <a class="media-left waves-light">
                                <img class="img-circle" src="https://mdbootstrap.com/wp-content/uploads/2015/10/team-avatar-1.jpg" alt="Generic placeholder image">
                            </a>
                            <div class="media-body">
                                <h4 class="media-heading">John Doe</h4>
                                <ul class="rating inline-ul">
                                    <li><i class="fa fa-star amber-text"></i></li>
                                    <li><i class="fa fa-star amber-text"></i></li>
                                    <li><i class="fa fa-star amber-text"></i></li>
                                    <li><i class="fa fa-star"></i></li>
                                    <li><i class="fa fa-star"></i></li>
                                </ul>
                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi cupiditate temporibus iure soluta. Quasi mollitia maxime nemo quam accusamus possimus.</p>
                            </div>
                        </div>

                        <!--Second review-->
                        <div class="media">
                            <a class="media-left waves-light">
                                <img class="img-circle" src="https://mdbootstrap.com/wp-content/uploads/2015/10/team-avatar-2.jpg" alt="Generic placeholder image">
                            </a>
                            <div class="media-body">
                                <h4 class="media-heading">Nathan Casie</h4>
                                <ul class="rating inline-ul">
                                    <li><i class="fa fa-star amber-text"></i></li>
                                    <li><i class="fa fa-star amber-text"></i></li>
                                    <li><i class="fa fa-star amber-text"></i></li>
                                    <li><i class="fa fa-star amber-text"></i></li>
                                    <li><i class="fa fa-star amber-text"></i></li>
                                </ul>
                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi cupiditate temporibus iure soluta. Quasi mollitia maxime nemo quam accusamus possimus.</p>
                            </div>
                        </div>

                        <!--Second review-->
                        <div class="media">
                            <a class="media-left waves-light">
                                <img class="img-circle" src="https://mdbootstrap.com/wp-content/uploads/2015/10/team-avatar-3.jpg" alt="Generic placeholder image">
                            </a>
                            <div class="media-body">
                                <h4 class="media-heading">Dave Snow</h4>
                                <ul class="rating inline-ul">
                                    <li><i class="fa fa-star amber-text"></i></li>
                                    <li><i class="fa fa-star amber-text"></i></li>
                                    <li><i class="fa fa-star amber-text"></i></li>
                                    <li><i class="fa fa-star amber-text"></i></li>
                                    <li><i class="fa fa-star"></i></li>
                                </ul>
                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi cupiditate temporibus iure soluta. Quasi mollitia maxime nemo quam accusamus possimus, voluptatum expedita assumenda. Earum sit id ullam eum vel delectus!</p>
                            </div>
                        </div>
                    </div>
                    <!--/.Third column-->
                </div>
            </div>
            <!--/.Grid-->

        </div>
        <!--Footer-->
        <div class="modal-footer">
            <a class="btn btn-default">Ask about details</a>
            <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
        </div>
    </div>
    <!--/.Content-->
    </div>
    </div>
    <!--/Modal quick-look-ex-->

<!--Navigation导航-->
<header>
     <!-- SideNav slide-out button
    <a href="#" data-activates="slide-out" class="button-collapse"><i class="fa fa-bars"></i></a>
    <!--/. SideNav slide-out button -->

    <!-- Sidebar navigation 侧边导航栏-->
    <ul id="slide-out" class="side-nav fixed default-side-nav ">

        <!-- Logo -->
        <div class="logo-wrapper waves-light">
            <a href="#"><img src="https://mdbootstrap.com/wp-content/uploads/2015/12/mdb-white2.png" class="img-fluid flex-center"></a>
        </div>
        <!--/. Logo -->

        <!--Search Form-->
        <form class="search-form" role="search">
            <div class="form-group waves-effect">
                <input type="text" class="form-control" placeholder="Search">
            </div>
        </form>
        <!--/.Search Form-->

        <!-- Side navigation links -->
        <ul class="collapsible collapsible-accordion">
            <li><a class="collapsible-header waves-effect">Click me</a>
                <div class="collapsible-body">
                    <ul>
                        <li><a href="#" class="waves-effect">Link</a>
                        </li>
                        <li><a href="#" class="waves-effect">Link</a>
                        </li>
                    </ul>
                </div>
            </li>
            <li><a class="collapsible-header waves-effect">Click me</a>
                <div class="collapsible-body">
                    <ul>
                        <li><a href="#" class="waves-effect">Link</a>
                        </li>
                        <li><a href="#" class="waves-effect">Link</a>
                        </li>
                    </ul>
                </div>
            </li>
            <li><a class="collapsible-header waves-effect">Click me</a>
                <div class="collapsible-body">
                    <ul>
                        <li><a href="#" class="waves-effect">Link</a>
                        </li>
                        <li><a href="#" class="waves-effect">Link</a>
                        </li>
                    </ul>
                </div>
            </li>
        </ul>
        <!--/. Side navigation links -->
    </ul>
    <!--/. Sidebar navigation -->

    <!--Navbar 头部导航栏-->
    <nav class="navbar navbar-fixed-top scrolling-navbar double-nav">

    <!-- SideNav slide-out button 侧边栏触发按钮 -->
    <div class="pull-left">
        <a href="#" data-activates="slide-out" class="button-collapse"><i class="fa fa-bars"></i></a>
    </div>

    <!-- Breadcrumb-->
    <div class="breadcrumb-dn">
        <p>Material Design for Bootstrap</p>
    </div>

    <ul class="nav navbar-nav pull-right">

        <li class="nav-item ">
            <!-- 模态框触发a连接 -->
            <a class="nav-link"  data-toggle="modal" data-target="#modal-contact"><i class="fa fa-envelope"></i> <span class="hidden-sm-down">Contact</span></a>
            <!-- /.模态框触发a连接 -->
        </li>
        <li class="nav-item ">
            <a class="nav-link"><i class="fa fa-comments-o"></i> <span class="hidden-sm-down">Support</span></a>
        </li>
        <li class="nav-item ">
            <a class="nav-link"><i class="fa fa-user"></i> <span class="hidden-sm-down">Account</span></a>
        </li>
        <li class="nav-item" >
            <!--<a data-toggle="modal" data-target="#modal-login" href="#" class=" waves-effect waves-light"><i class="fa fa-sign-in"></i><span>LogIn</span></a>-->
            <a class="nav-link"  data-toggle="modal" data-target="#modalLogin"><i class="fa fa-sign-in"></i> <span class="hidden-sm-down">LogIn</span></a>
        </li>
        <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fa fa-user"></i> Profile</a>
            <div class="dropdown-menu dropdown-primary dd-right" aria-labelledby="dropdownMenu1" data-dropdown-in="fadeIn" data-dropdown-out="fadeOut">
                <a class="dropdown-item" href="#">Action</a>
                <a class="dropdown-item" href="#">Another action</a>
                <a class="dropdown-item" href="#">Something else here</a>
            </div>
        </li>
        <li class="nav-item">
            <!-- 触发 Modal Cart Modal a连接 -->
            <a class="nav-link"  data-toggle="modal" data-target="#cart-modal-ex"><i class="fa fa-shopping-cart"></i> <span class="hidden-sm-down">Cart</span></a>
            <!-- 触发 Modal Cart Modal a连接 -->
        </li>

    </ul>

    </nav>
    <!--/.Navbar-->

</header>
<!--/Navigation导航-->

<!-- 主页面布局-->
<main>
    <div class="main-wrapper"> <!-- 主要装饰器 -->
        <div class="container-fluid"> <!-- 全宽布局 -->

            <!--Main carousel 轮播图-->

                <!--Carousel Wrapper-->
                <div id="carousel-example-2" class="carousel slide carousel-fade z-depth-1-half" data-ride="carousel">
                <!--Indicators-->
                <ol class="carousel-indicators">
                    <li data-target="#carousel-example-2" data-slide-to="0" class="active"></li>
                    <li data-target="#carousel-example-2" data-slide-to="1"></li>
                    <li data-target="#carousel-example-2" data-slide-to="2"></li>
                </ol>
                <!--/.Indicators-->

                <!--Slides-->
                <div class="carousel-inner" role="listbox">
                    <!--First slide-->
                    <div class="carousel-item active">
                        <!--Mask color-->
                        <div class="view hm-black-light">
                            <img src="https://mdbootstrap.com/images/ecommerce/slides/slide%20(5).jpg" class="img-fluid" alt="">
                            <div class="full-bg-img">
                            </div>
                        </div>
                        <!--Caption-->
                        <div class="carousel-caption">
                            <div class="animated fadeInDown">
                                <h3 class="h3-responsive">Light mask</h3>
                                <p>Secondary text</p>
                            </div>
                        </div>
                        <!--Caption-->
                    </div>
                    <!--/First slide-->

                    <!--Second slide-->
                    <div class="carousel-item">
                        <!--Mask color-->
                        <div class="view hm-black-strong">
                            <img src="https://mdbootstrap.com/images/ecommerce/slides/slide%20(4).jpg" class="img-fluid" alt="">
                            <div class="full-bg-img">
                            </div>
                        </div>
                        <!--Caption-->
                        <div class="carousel-caption">
                            <div class="animated fadeInDown">
                                <h3 class="h3-responsive">Strong mask</h3>
                                <p>Secondary text</p>
                            </div>
                        </div>
                        <!--Caption-->
                    </div>
                    <!--/Second slide-->

                    <!--Third slide-->
                    <div class="carousel-item">
                        <!--Mask color-->
                        <div class="view hm-black-slight">
                            <img src="https://mdbootstrap.com/images/ecommerce/slides/slide%20(2).jpg" class="img-fluid" alt="">
                            <div class="full-bg-img">
                            </div>
                        </div>
                        <!--Caption-->
                        <div class="carousel-caption">
                            <div class="animated fadeInDown">
                                <h3 class="h3-responsive">Super light mask</h3>
                                <p>Secondary text</p>
                            </div>
                        </div>
                        <!--Caption-->
                    </div>
                    <!--/Third slide-->
                </div>
                <!--/.Slides-->

                <!--Controls-->
                <a class="left carousel-control" href="#carousel-example-2" role="button" data-slide="prev">
                    <span class="icon-prev" aria-hidden="true"></span>
                    <span class="sr-only">Previous</span>
                </a>
                <a class="right carousel-control" href="#carousel-example-2" role="button" data-slide="next">
                    <span class="icon-next" aria-hidden="true"></span>
                    <span class="sr-only">Next</span>
                </a>
                <!--/.Controls-->
                </div>
                <!--/.Carousel Wrapper-->

            <!--/.Main carousel 轮播图--->


            <h5 class="section-title st-mdb">Bestsellers
                <small>Secondary text</small>
            </h5>


            <!--Featured cards 特色卡-->
                <div class="row">

                    <!--First column-->
                    <div class="col-md-4">

                        <!--Card-->
                        <div class="card card-cascade narrower">

                            <!--Card image-->
                            <div class="view overlay hm-white-slight">
                                <img src="https://mdbootstrap.com/images/ecommerce/reg/reg%20%282%29.jpg" class="img-fluid" alt="">
                                <a>
                                    <div class="mask"></div>
                                </a>
                            </div>
                            <!--/.Card image-->

                            <!--Card content-->
                            <div class="card-block text-center">
                                <!--Category & Title-->
                                <h5>Category</h5>
                                <h4 class="card-title"><strong><a href="">Product name</a></strong></h4>

                                <!--Description-->
                                <p class="card-text">Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates.
                                </p>

                                <!--Card footer-->
                                <div class="card-footer">
                                    <span class="left">49$</span>
                                    <span class="right">
                                        <a class="" data-toggle="tooltip" data-placement="top" title="Quick Look"><i class="fa fa-eye"></i></a>
                                        <a class="" data-toggle="tooltip" data-placement="top" title="Add to Wishlist"><i class="fa fa-heart"></i></a>
                                    </span>
                                </div>

                            </div>
                            <!--/.Card content-->

                        </div>
                        <!--/.Card-->

                    </div>
                    <!--/First column-->

                    <!--Second column-->
                    <div class="col-md-4">

                        <!--Card-->
                        <div class="card card-cascade narrower">

                            <!--Card image-->
                            <div class="view overlay hm-white-slight">
                                <img src="https://mdbootstrap.com/images/ecommerce/reg/reg%20%282%29.jpg" class="img-fluid" alt="">
                                <a>
                                    <div class="mask"></div>
                                </a>
                            </div>
                            <!--/.Card image-->

                            <!--Card content-->
                            <div class="card-block text-center">
                                <!--Category & Title-->
                                <h5>Category</h5>
                                <h4 class="card-title"><strong><a href="">Product name</a></strong></h4>

                                <!--Description-->
                                <p class="card-text">Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates.
                                </p>

                                <!--Card footer-->
                                <div class="card-footer">
                                    <span class="left">49$</span>
                                    <span class="right">
                                        <a class="" data-toggle="tooltip" data-placement="top" title="Quick Look"><i class="fa fa-eye"></i></a>
                                        <a class="" data-toggle="tooltip" data-placement="top" title="Add to Wishlist"><i class="fa fa-heart"></i></a>
                                    </span>
                                </div>

                            </div>
                            <!--/.Card content-->

                        </div>
                        <!--/.Card-->


                    </div>
                    <!--/Second column-->

                    <!--Third column-->
                    <div class="col-md-4">

                        <!--Card-->
                        <div class="card card-cascade narrower">

                            <!--Card image-->
                            <div class="view overlay hm-white-slight">
                                <img src="https://mdbootstrap.com/images/ecommerce/reg/reg%20%282%29.jpg" class="img-fluid" alt="">
                                <a>
                                    <div class="mask"></div>
                                </a>
                            </div>
                            <!--/.Card image-->

                            <!--Card content-->
                            <div class="card-block text-center">
                                <!--Category & Title-->
                                <h5>Category</h5>
                                <h4 class="card-title"><strong><a href="">Product name</a></strong></h4>

                                <!--Description-->
                                <p class="card-text">Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates.
                                </p>

                                <!--Card footer-->
                                <div class="card-footer">
                                    <span class="left">49$</span>
                                    <span class="right">
                                        <a class="" data-toggle="tooltip" data-placement="top" title="Quick Look"><i class="fa fa-eye"></i></a>
                                        <a class="" data-toggle="tooltip" data-placement="top" title="Add to Wishlist"><i class="fa fa-heart"></i></a>
                                    </span>
                                </div>

                            </div>
                            <!--/.Card content-->

                        </div>
                        <!--/.Card-->

                    </div>
                    <!--/Third column-->
                </div>
            <!--/Featured cards 特色卡-->

            <h5 class="section-title st-mdb">Collections <!-- 次级文本 -->
                <small>Secondary text</small>
            </h5>

            <!--Collections--> <! -- 收藏 -- >
            <div class="row">
                <!--First column-->
                <div class="col-md-3">

                </div>
                <!--/First column-->

                <!--Second column-->
                <div class="col-md-3">

                </div>
                <!--/Second column-->

                <!--Third column-->
                <div class="col-md-3">

                </div>
                <!--/Third column-->

                <!--Fourth column-->
                <div class="col-md-3">

                </div>
                <!--/Fourth column-->
            </div>
            <!--/Collections-->

            <h5 class="section-title st-mdb">Additional cards
                <small>Secondary text</small>
            </h5>

            <!--Additional cards-->
            <div class="row">
                <!--First column-->
                <div class="col-md-6">

                </div>
                <!--/First column-->

                <!--Second column-->
                <div class="col-md-6">

                </div>
                <!--/Second column-->
            </div>
            <!--/Additional cards-->

            <h5 class="section-title st-mdb">Products carousel
                <small>Secondary text</small>
            </h5>

            <!--Products carousel-->
            <div class="row">

            </div>
            <!--/Products carousel-->

            <h5 class="section-title st-mdb">Blog
                <small>Secondary text</small>
            </h5>

            <!--Blog card-->
            <div class="row">
                <!--First column-->
                <div class="col-md-4">

                </div>
                <!--/First column-->

                <!--Second column-->
                <div class="col-md-4">

                </div>
                <!--/Second column-->

                <!--Third column-->
                <div class="col-md-4">

                </div>
                <!--/Third column-->
            </div>
            <!--/Blog card-->

        </div>
    </div>
</main>
<!-- /.主页面布局-->

<!--页脚-->
<footer>
</footer>
<!--/页脚-->


<!-- SCRIPTS -->

<!-- JQuery -->
<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>

<!-- Bootstrap tooltips -->
<script type="text/javascript" src="js/tether.min.js"></script>

<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="js/bootstrap.min.js"></script>

<!-- MDB core JavaScript -->
<script type="text/javascript" src="js/mdb.min.js"></script>
<script>
    // SideNav Init 侧边栏初始化
    $(".button-collapse").sideNav();

    // Tooltips init  鼠标往Featured cards 收藏弹出提示
    $(function () {
      $('[data-toggle="tooltip"]').tooltip()
    });



</script>

</body>

</html>
<!--
为解决问题 点击小眼睛弹出mmodal

-->